<template>
  <view class="container" :style="{ paddingBottom: active == 1 ? '152rpx' : '0rpx' }">
    <view class="header">
      <view style="display: flex; align-items: center; font-weight: 500; font-size: 28rpx; color: #222222">
        <view style="padding-bottom: 16rpx; margin-left: 42rpx" :class="{ common: active == 1 }" @click="active = 1">可开票订单</view>
        <view style="padding-bottom: 16rpx; margin-left: 66rpx" :class="{ common: active == 2 }" @click="active = 2">开票历史</view>
      </view>
      <view class="choosecity" @click="$refs.area.open()">
        <text>不限城市</text>
      </view>
    </view>
    <!-- 开票列表 -->
    <view class="available" v-if="active == 1">
      <view class="item1" v-for="item in list" :key="item.id">
        <!-- 时间-->
        <view class="top">
          <view>
            <image src="../../static/mine/time.png" style="width: 28rpx; height: 28rpx; margin-right: 14rpx; vertical-align: middle" mode=""></image>
            <text style="font-weight: 500; font-size: 28rpx; color: #222222">{{ item.time }}</text>
          </view>
          <!-- 单选按钮 -->
          <radio :checked="item.ischeck" @click="change(item)" style="transform: scale(0.7)" color="#2774F6" />
        </view>
        <!-- 起始点终点 -->
        <view class="content">
          <view class="start">
            <image src="../../static/mine/start.png" style="width: 24rpx; height: 24rpx" mode=""></image>
            <view class="startaddress">
              {{ item.starting }}
            </view>
          </view>
          <view class="end">
            <image src="../../static/mine/end.png" style="width: 24rpx; height: 24rpx; margin-right: 14rpx" mode=""></image>
            <view class="endaddress">{{ item.end }}</view>
            <view class="money">
              <text style="font-weight: bold; font-size: 32rpx; color: #f30021">{{ item.money }}</text>
              <text style="font-weight: 500; font-size: 24rpx; color: #222222">元</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 开票历史 -->
    <view class="history" v-if="active == 2">
      <view class="item2" v-for="item in historylist" :key="item.id" @click="goinvoicedetail(item)">
        <view class="historytop">
          <image src="../../static/mine/time.png" style="width: 28rpx; height: 28rpx" mode=""></image>
          <text style="font-weight: 500; font-size: 28rpx; color: #222222; margin: 0 14rpx 0 18rpx">{{ item.time }}</text>
          <view
            style="
              width: 92rpx;
              height: 42rpx;
              background: #ecf4ff;
              border-radius: 10rpx 10rpx 10rpx 10rpx;
              font-weight: 500;
              font-size: 24rpx;
              color: #3483f6;
              text-align: center;
              line-height: 42rpx;
            "
          >
            {{ item.status == 1 ? '申请中' : item.status == 2 ? '已开票' : '已驳回' }}
          </view>
        </view>
        <!-- 开票金额 -->
        <view style="display: flex; align-items: center; justify-content: space-between; margin-top: 28rpx">
          <view style="font-weight: 500; font-size: 28rpx; color: #222222">开票金额</view>
          <view>
            <text style="font-weight: bold; font-size: 32rpx; color: #f30021">{{ item.money }}</text>
            <text style="font-weight: 500; font-size: 24rpx; color: #222222">元</text>
          </view>
        </view>
        <!-- 抬头 -->
        <view style="display: flex; align-items: center; justify-content: space-between; margin-top: 32rpx">
          <view style="font-weight: 500; font-size: 28rpx; color: #222222">抬头</view>
          <view style="font-weight: 500; font-size: 28rpx; color: #222222">{{ item.title }}</view>
        </view>
      </view>
    </view>
    <!-- 全选区域 -->
    <view class="all" v-if="active == 1">
      <view>
        <radio :checked="checkall" color="#2774F6" style="transform: scale(0.7)" @click="checkallfn"></radio>
        <text style="font-weight: 500; font-size: 26rpx; color: #222222">全选</text>
      </view>
      <view class="money">
        <text style="font-weight: bold; font-size: 32rpx; color: #f30021">{{ allmoney.toFixed(2) }}</text>
        <text style="font-weight: 500; font-size: 24rpx; color: #222222">元</text>
      </view>
      <view style="font-weight: 500; font-size: 24rpx; color: #222222">共{{ count }}个行程</view>
      <view class="getticket" @click="goinvoice">去开票</view>
    </view>
    <!-- 选择城市-- -->
    <!-- 地区弹框 -->
    <uni-popup ref="area" type="bottom">
      <view class="area">
        <view class="head">
          <view style="font-weight: 550; font-size: 30rpx; color: #222222; margin-top: 30rpx" @click="$refs.area.close()">取消</view>
          <view style="font-weight: bold; font-size: 32rpx; color: #222222">请选择</view>
          <view style="font-weight: 500; font-size: 30rpx; color: #3483f6" @click="fnok">确定</view>
        </view>
        <picker-view style="height: 500rpx" indicator-style="height: 50px;" :value="place" @change="bindChange">
          <picker-view-column>
            <view style="line-height: 100rpx; text-align: center" v-for="(item, index) in provinceData" :key="index">{{ item.name }}</view>
          </picker-view-column>
          <picker-view-column>
            <view style="line-height: 100rpx; text-align: center" v-for="(item, index) in cityData[0].city" :key="index">{{ item.name }}</view>
          </picker-view-column>
        </picker-view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import Vue from 'vue';
import dayjs from 'dayjs';
import provinceData from '@/utils/data.js';
export default {
  data() {
    return {
      page: 1,
      page2: 1,
      list: [], //开票列表
      historylist: [], // 开票历史
      active: 1, // 选中的navbar
      // checkall: false,
      count: 0,
      allmoney: 0,
      place: [0, 0], // 选择市区
      provinceData: [],
      provinceidnex: 0, // 省份的索引
      provincename: '', // 省份
      cityname: '', //城市的名字
      cityindex: 0, // 城市的索引
      city: ''
    };
  },
  computed: {
    checkall: {
      get() {
        return this.list.every((item) => {
          return item.ischeck;
        });
      },
      set(value) {
        console.log(value);
        this.list.forEach((item) => {
          item.ischeck = value;
        });
      }
    },
    cityData() {
      return this.provinceData.filter((item) => {
        return item.name == this.provinceData[this.provinceidnex].name;
      });
    }
  },
  methods: {
    // 获取开票历史
    async gethistorylist() {
      const res = await this.http('/ticket/history', {
        page: this.page2
      });
      console.log('开票历史', res);
      res.data.list.forEach((item) => {
        item.time = dayjs(item.createtime * 1000).format('YYYY-DD-MM HH:mm');
      });
      this.historylist = res.data.list;
      uni.stopPullDownRefresh();
    },
    checkallfn() {
      this.allmoney = 0;
      this.checkall = !this.checkall;
      this.count = this.list.filter((item) => {
        return item.ischeck;
      }).length;
      this.list.forEach((item) => {
        if (item.ischeck) {
          this.allmoney += Number(item.money);
        }
      });
    },
    change(item) {
      this.allmoney = 0;
      item.ischeck = !item.ischeck;
      console.log(item.ischeck);
      this.count = this.list.filter((item) => {
        return item.ischeck;
      }).length;
      this.list.forEach((item) => {
        if (item.ischeck) {
          this.allmoney += Number(item.money);
        }
      });
    },
    //获取开票订单
    async getbilloist() {
      const res = await this.http('/ticket/list', {
        page: this.page
      });
      console.log('开票订单', res);
      res.data.list.forEach((item) => {
        item.time = dayjs(item.createtime * 1000).format('YYYY-MM-DD HH:mm');
        Vue.set(item, 'ischeck', false);
      });
      this.list = res.data.list;
      uni.stopPullDownRefresh();
    },
    // 地址切换
    bindChange(e) {
      console.log(e.detail.value);
      this.provinceidnex = e.detail.value[0];
      this.cityindex = e.detail.value[1];
      this.provincename = this.provinceData[this.provinceidnex].name;
      this.cityname = this.provinceData[this.provinceidnex].city[this.cityindex].name;
      console.log(this.provincename, this.cityname);
    },
    // 确定地址
    fnok() {
      this.city = this.provinceData[this.provinceidnex].name + this.provinceData[this.provinceidnex].city[this.cityindex].name;
      this.$refs.area.close();
    },
    // 跳转到开发票
    goinvoice() {
      const ids = [];
      this.list.forEach((item) => {
        if (item.ischeck) ids.push(item.id);
      });
      console.log(ids);

      uni.navigateTo({
        url: '/mine/invoice/invoice?ids=' + ids + '&money=' + this.allmoney.toFixed(2)
      });
    },
    // 跳转到发票详情
    goinvoicedetail(item) {
      uni.navigateTo({
        url: '/mine/invoicedetail/invoicedetail?id=' + item.id
      });
    }
  },
  onLoad() {
    this.getbilloist();
    this.gethistorylist();
    this.provinceData = provinceData;
    this.provinceData.unshift({ name: '不限城市', city: [{ name: '' }] });
  },
  async onReachBottom() {
    console.log('触底了----');
    if (this.active == 1) {
      this.page++;
      const res = await this.http('/ticket/list', {
        page: this.page
      });
      console.log('开票订单', res);
      res.data.list.forEach((item) => {
        item.time = dayjs(item.createtime * 1000).format('YYYY-MM-DD HH:mm');
        Vue.set(item, 'ischeck', false);
      });
      this.list.push(...res.data.list);
    } else {
      this.page2++;
      const res = await this.http('/ticket/history', {
        page: this.page2
      });
      console.log('开票历史', res);
      res.data.list.forEach((item) => {
        item.time = dayjs(item.createtime * 1000).format('YYYY-DD-MM HH:mm');
      });
      this.historylist.push(...res.data.list);
    }
  },
  onPullDownRefresh() {
    this.page = 1;
    this.page2 = 1;
    this.getbilloist();
    this.gethistorylist();
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    .choosecity {
      box-sizing: border-box;
      width: 158rpx;
      height: 64rpx;
      background: #ecf4ff;
      font-weight: 500;
      font-size: 28rpx;
      color: #3483f6;
      text-align: center;
      line-height: 64rpx;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
      border: 1rpx solid #3483f6;
      margin-right: 24rpx;
    }
    .common {
      font-weight: bold;
      font-size: 28rpx;
      color: #222222;
      border-bottom: 6rpx solid #3483f6;
    }
  }
  .available {
    .item1 {
      box-sizing: border-box;
      width: 702rpx;
      height: 310rpx;
      background: #ffffff;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      margin: 20rpx 24rpx;
      padding: 28rpx 20rpx;
      .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #ccc;
        padding-bottom: 22rpx;
      }
      .content {
        .start {
          display: flex;
          align-items: center;
          margin-top: 20rpx;
          .startaddress {
            width: 476rpx;
            margin-left: 16rpx;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
        }
        .end {
          display: flex;
          align-items: center;
          margin-top: 20rpx;
          .endaddress {
            width: 450rpx;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
          .money {
            margin-left: 20rpx;
          }
        }
      }
    }
  }
  .all {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 750rpx;
    height: 152rpx;
    background: #ffffff;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    padding: 0 26rpx 0 32rpx;
    .money {
      margin-left: 100rpx;
      margin-right: 13rpx;
    }
    .getticket {
      box-sizing: border-box;
      width: 184rpx;
      height: 92rpx;
      text-align: center;
      line-height: 92rpx;
      background: #3483f6;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      font-weight: 500;
      font-size: 30rpx;
      color: #ffffff;
      margin-left: 28rpx;
    }
  }
  .history {
    .item2 {
      box-sizing: border-box;
      width: 702rpx;
      height: 270rpx;
      background: #ffffff;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      margin: 20rpx 24rpx;
      .historytop {
        display: flex;
        align-items: center;
        padding: 28rpx 0 22rpx 20rpx;
        border-bottom: 2rpx solid #e7e7e7;
      }
    }
  }
  .area {
    box-sizing: border-box;
    width: 750rpx;
    height: 776rpx;
    background: #ffffff;
    border-radius: 40rpx 40rpx 0rpx 0rpx;
    padding: 48rpx;
    .head {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #fff;
    }
  }
}
</style>
<style>
page {
  background-color: #f8f9fa;
}
</style>
